<template>
  <div>
    <tabbar>
      <tabbar-item link="/home">
        <img slot="icon" src="static/bottom/homeblack.png">
         <img slot="icon-active" src="static/bottom/home.png">
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item link="/classify/classify">
        <img slot="icon" src="static/bottom/分类black.png">
        <img slot="icon-active" src="static/bottom/分类.png">
        <span slot="label">分类</span>
      </tabbar-item>
        <tabbar-item link="/find/find">
        <img style="height:40px;width:40px;position:fixed;bottom:25px;left:calc(50% - 20px);" slot="icon" src="static/bottom/faxian@2x.png">
        <img style="height:40px;width:40px;position:fixed;bottom:25px;left:calc(50% - 20px);" slot="icon-active" src="static/bottom/faxian@2x.png">
        <span slot="label">发现</span>
      </tabbar-item>
      <tabbar-item link="/cart/cart">
        <img slot="icon" src="static/bottom/购物车black.png">
        <img slot="icon-active" src="static/bottom/购物车.png">
        <span slot="label">购物车</span>
      </tabbar-item>
      <tabbar-item link="/personal/userInfo">
        <img slot="icon" src="static/bottom/account.png">
        <img slot="icon-active" src="static/bottom/accountred.png">
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
  import { Tabbar, TabbarItem, Group, Cell } from 'vux'

  export default {
    components: {
      Tabbar,
      TabbarItem,
      Group,
      Cell
    },
     created(){
        //   this.$router.beforeEach((to, from, next) => {
        //       console.log("路由监听")
            
        //       console.log(to);
        //       next();
        //   });
        }
  }
</script>
<style>
 tabbar__item.weui-bar__item_on .weui-tabbar__label {
    color: red;
}
</style>
